//入口文件
import Vue from 'vue'

//1.1导入路由的包
import VueRouter from 'vue-router'
//1.2安装路由
Vue.use(VueRouter)

//导入 vuex 
import Vuex from 'vuex'
//安装 vuex
Vue.use(Vuex)

//导入格式化时间插件
import moment from 'moment'
//定义全局的过滤器
Vue.filter('dateFormat',function(dataStr,pattern="YYYY-MM-DD HH:mm:ss"){
        return moment(dataStr).format(pattern)
})

//2.1导入vue-resource
import VueResource from 'vue-resource'
//2.2安装vue-resource
Vue.use(VueResource)
//全局设置请求的根路径
Vue.http.options.root='http://vue.studyit.io';
//全局设置post 时候表单数据格式组织形式 application/x-www-form-urlencoded
Vue.http.options.emulteJSON=true;

//底部导航使用MUI组件
//导入MUI的样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'

//顶部固定栏使用Mint-ui组件
//按需导入Mint-ui中的组件
/*import {Header,Swipe,SwipeItem,Button,Lazyload} from 'mint-ui'
Vue.component(Header.name,Header)
Vue.component(Swipe.name,Swipe)
Vue.component(SwipeItem.name,SwipeItem)
Vue.component(Button.name,Button)
Vue.use(Lazyload);*/
// 因为上面那种按需导入的方法，在导入 懒加载lazyload 时，页面上无法显示加载中的提示图标，只有全部导入才显示，所以用全部导入
//全部导入Mint-ui组件
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'//全部导入的时候，还得导入样式

//导入安装 缩略图预览插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

//1.3导入自己的router.js路由模块
import router from './router.js'

//导入APP跟组件
import app from './app.vue'


//每次刚进入网站，肯定会调用 main.js 在刚调用的时候，先从本地存储中，把购物车的数据读出来，放到 store 中
var car=JSON.parse(localStorage.getItem('car')||'[]');
var store= new Vuex.Store({
        // ...
        state:{//组件中的调用方式：this.$store.state.变量名
                car:car//将购物车中的商品数据，用一个数组存储起来，在car数组中，存储一些商品的对象，可以暂时将这个商品对象，设计成这个样子：{id:商品id,count:要购买的数量,price:商品的单价,selected:是否选中}
        },
        mutations:{//组件中的调用方式：this.$store.commit('方法名','按需传递唯一的参数')
                addToCar(state,goodsinfo){//点击加入购物车，把商品信息保存到 store 中的car上
                        //分析：
                        //1.如果购物车中，之前就已经有该商品了，那么只需要更新数量即可
                        //2.如果没有，则直接把商品数据，push 到 car 中即可
                        //假设，在购物车中，没有找到对应的商品
                        var flag=false;
                        state.car.some(item=>{//some中不能用else
                                if(item.id==goodsinfo.id){
                                        item.count+=parseInt(goodsinfo.count);
                                        flag=true;
                                        return true
                                }
                        })
                        //如果最终循环完毕，得到的flag还是false,则表示car 中没有对应的商品，那么久把商品数据直接 push 到 car 中
                        if(!falg){//car 中没有对应的商品
                                state.car.push(goodsinfo)
                        }
                        //注：当更新 car 之后，把car 数组，存储到本地的 localStorage 中，否则当页面刷新时，会初始化 car 中的数据
                        localStorage.setItem('car',JSON.stringify(state.car))
                },
                updateGoodsInfo(state,goodsinfo){//修改购物车中商品的数量值
                        state.car.some(item=>{
                                if(item.id==goodsinfo.id){
                                        item.count=parseInt(goodsinfo.count);
                                        return true
                                }
                        })
                        //当修改完商品的数量，把最新的购物车数据 保存到store中
                        localStorage.setItem('car',JSON.stringify(state.car))
                },
                removeFormCar(state,id){//根据id 从store 中的购物车中删除对应的那条商品数据
                        state.car.some((item,i)=>{
                                if(item.id==id){
                                        state.car.splice(i,1)
                                        return true;
                                }
                        });
                        //将删除完毕后的，最新的购物车数据，同步到本地存储中
                        localStorage.setItem('car',JSON.stringify(state,car))
                },
                updateGoodsSelected(state,{info}){
                        state.car.some(item=>{
                                if(item.id==info.id){
                                        item.selected=info.selected;
                                }
                        })
                        //把最新的 所有购物车商品的状态，保存到 store 中去
                        localStorage.setItem('car',JSON.stringify(state.car))
                }
        },
        getters:{//注：这里的 getters 只负责对外提供数据，不负责修改数据，如果想要修改state 中的数据，应在 mutations中
                //组件中的调用方式：this.$store.getters.***
                //相当于 计算属性，也相当于 filters 
                getAllCount(state){
                        var c=0;
                        state.car.forEach(item=>{
                                c+=item.count;
                        })
                        return c
                },
                getGoodsCount(state){
                        var o={};
                        state.car.forEach(item=>{
                                o[item.id]=item.count;
                        })
                        return o
                },
                getGoodsSelected(state){
                        var o={};
                        state.car.forEach(item=>{
                                o[item.id]=item.selected
                        })
                        return o
                },
                getGoodsCountAndAmount(state){//
                        var o={
                                count:0,//勾选的数量
                                amount:0,//勾选的总价
                        }
                        state.car.forEach(item=>{
                                if(item.selected){
                                        o.count+=item.count
                                        o.amount+=item.price*item.count
                                }
                        })
                        return o
                }
        }
})
var vm=new Vue({
        el:'#app',
        render:c=>c(app),
        router, //1.4挂载路由对象到VM实例上
        store,//挂载 store 到vm实例上
})